<template>
  <div class="scanner">
    <van-nav-bar title="移库整箱上架" left-text="返回" @click-left="onClickLeft"></van-nav-bar>
    <van-row type="flex" justify="center">
      <van-col span="24">
        <van-form class="common-form">
          <van-field label="推荐库位" v-model="movePutawayParams.toLocationCode" autosize rows="1" type="textarea" disabled />
          <van-field
            v-model="movePutawayParams.moveCartonNumber"
            ref="moveCartonNumber"
            id="moveCartonNumber"
            name="移库单号"
            label="移库单号"
            placeholder="移库单号"
            @focus="moveCartonNumberFocusClick"
            @click="moveCartonNumberFocusClick"
            :readonly="moveCartonNumberReadOnly"
            @keyup.enter.native="!pdaScanData.data ? getWaitMovePutawayData() : ''"
          />
          <van-field
            v-model="movePutawayParams.locationCode"
            ref="locationCode"
            id="locationCode"
            name="库位"
            label="库位"
            placeholder="库位"
            @focus="locationCodeFocusClick"
            @click="locationCodeFocusClick"
            :readonly="locationCodeReadOnly"
            @keyup.enter.native="!pdaScanData.data ? doMoveBoxPutaway() : ''"
          />
          <van-field
            v-model="movePutawayParams.putawayQty"
            ref="putawayQty"
            id="putawayQty"
            name="待上架数量"
            label="待上架数量"
            readonly
            error
          />
        </van-form>
      </van-col>
    </van-row>
    <!-- 普通消息响应遮罩层 -->
    <van-overlay :show="showMsgOverlay">
      <div class="wrapper">
        <div>
          <van-row>
            <div class="msgTxt">{{ showMsg }}</div>
          </van-row>
          <van-row style="margin-top:64px">
            <van-col span="24" style="text-align:center">
              <van-button type="primary" @click="closeOverlay()">关闭</van-button>
            </van-col>
          </van-row>
        </div>
      </div>
    </van-overlay>

    <!-- 加载遮罩 -->
    <van-overlay :show="showLoadingOverlay">
      <div class="wrapper">
        <div>
          <van-row>
            <div class="msgTxt">加载中......</div>
          </van-row>
        </div>
      </div>
    </van-overlay>
  </div>
</template>
<script>
import {mapGetters} from "vuex";
import {getWaitMovePutawayData, doMoveBoxPutaway} from "@/api/biz/moveTask/moveTask.js";
export default {
  name: "mveBoxPutaway",
  computed: {
    ...mapGetters("user", ["userData"]),
    ...mapGetters("scanner", ["pdaScanData"])
  },
  watch: {
    // 扫描枪操作
    pdaScanData: {
      handler(data) {
        this.scanEvent(data.data);
        let input = document.activeElement.id;
        if (input == "moveCartonNumber") {
          this.movePutawayParams.moveCartonNumber = data.data;
          this.getWaitMovePutawayData();
        }
        if (input == "locationCode") {
          this.movePutawayParams.locationCode = data.data;
          this.doMoveBoxPutaway();
        }
      },
      deep: true
    }
  },
  created() {
    // 默认焦点聚焦到箱号框
    this.moveCartonNumberFocus();
    // 获取当前登录用户名
    this.movePutawayParams.user = this.userData.sysUserLoginName;

    // 获取移库任务领取页面传递的参数
    if (this.$route.params.moveCode != undefined) {
      this.movePutawayParams.moveCartonNumber = this.$route.params.moveCode;

      // 获取待移库下架数据
      this.getWaitMovePutawayData();

      // 默认选中来源库位
      this.$nextTick(() => {
        this.locationCodeFocus();
      });
    }
  },
  data() {
    return {
      // 只读选项
      moveCartonNumberReadOnly: false,
      locationCodeReadOnly: false,
      // 定义扫描数据
      scanData: [],

      // 表单参数
      movePutawayParams: {
        storerId: "",
        warehouseId: "",
        brandId: "",
        putawayQty: 0,
        moveCartonNumber: "",
        locationCode: "",
        user: "",
        toLocationCode: ""
      },
      // 消息遮罩层参数
      showMsgOverlay: false,
      showMsg: "",
      // 当前得失焦点的文本框
      currentBlurName: "",

      // 加载遮罩
      showLoadingOverlay: false
    };
  },
  methods: {
    // 扫描枪扫描
    clickEvent() {
      this.scanData = [];
      // this.$toast.success("扫描数据被清理了");
    },
    scanEvent(data) {
      this.scanData.push(data);
    },
    scanErrorEvent() {},
    cellClickEvent() {},
    // 移库单号框点击或失焦
    moveCartonNumberFocusClick() {
      this.moveCartonNumberReadOnly = true;
      this.currentBlurName = "moveCartonNumber";
      setTimeout(() => {
        this.moveCartonNumberReadOnly = false;
      }, 200);
    },
    // 库位框点击或失焦
    locationCodeFocusClick() {
      this.locationCodeReadOnly = true;
      this.currentBlurName = "locationCode";
      setTimeout(() => {
        this.locationCodeReadOnly = false;
      }, 200);
    },
    // 焦点聚焦到移库单号框
    moveCartonNumberFocus() {
      this.$nextTick(() => {
        this.$refs.moveCartonNumber.focus();
      });
    },
    // 光标跳转至库位
    locationCodeFocus() {
      this.$nextTick(() => {
        this.$refs.locationCode.focus();
      });
    },
    // 验证移库单号是否存在
    getWaitMovePutawayData() {
      if (this.movePutawayParams.moveCartonNumber == "") {
        this.msgShowTime("请输入移库单号！");
        // 定位到移库单号
        this.moveCartonNumberFocus();
        return false;
      }
      // 加载遮罩
      this.showLoadingOverlay = true;
      getWaitMovePutawayData(this.movePutawayParams).then(response => {
        this.showLoadingOverlay = false;
        if (response.data.status) {
          this.movePutawayParams.putawayQty = Number(response.data.data.allowPutawayQty) - Number(response.data.data.oldPutawayQty);
          // 赋值
          this.movePutawayParams.toLocationCode = response.data.data.toLocationCode;
          // 箱号验证成功后光标跳转至库位
          this.locationCodeFocus();
        } else {
          this.msgShowTime(response.data.message);
          // 赋值
          this.clearBaseInformation();
          this.movePutawayParams.moveCartonNumber = "";
          this.movePutawayParams.putawayQty = 0;
        }
      });
    },

    // 确认移库整箱上架
    doMoveBoxPutaway() {
      let moveCartonNumber = this.movePutawayParams.moveCartonNumber;
      let locationCode = this.movePutawayParams.locationCode;
      if (moveCartonNumber == "" || locationCode == "") {
        this.msgShowTime("移库单号和库位不能为空！");
        return false;
      }
      if (this.movePutawayParams.putawayQty <= 0) {
        this.msgShowTime("当前移库单无待上架商品！");
        this.movePutawayParams.moveCartonNumber = "";
        this.movePutawayParams.locationCode = "";
        this.movePutawayParams.locationId = "";
        this.clearBaseInformation();
        this.moveCartonNumberFocus();
        return false;
      }
      // 加载遮罩
      this.showLoadingOverlay = true;
      doMoveBoxPutaway(this.movePutawayParams).then(response => {
        // 加载遮罩
        this.showLoadingOverlay = false;
        if (response.data.status) {
          this.$notify({type: "success", message: response.data.message});
          this.movePutawayParams.moveCartonNumber = "";
          this.movePutawayParams.locationCode = "";
          this.movePutawayParams.locationId = "";
          this.movePutawayParams.putawayQty = 0;
        } else {
          this.movePutawayParams.moveCartonNumber = "";
          this.movePutawayParams.locationCode = "";
          this.movePutawayParams.locationId = "";
          this.movePutawayParams.putawayQty = 0;
          this.msgShowTime(response.data.message);
        }
        this.clearBaseInformation();
        this.moveCartonNumberFocus();
      });
    },
    // 清除货主仓库品牌数据
    clearBaseInformation() {
      this.movePutawayParams.toLocationCode = "";
    },
    // 返回上一级页面
    onClickLeft() {
      this.$router.push({
        name: "moveTaskMenu"
      });
    },
    // 遮罩层消息展示设置
    msgShowTime(msg) {
      this.showMsg = msg;
      this.showMsgOverlay = true;
      // setTimeout(() => {
      //     this.showMsgOverlay = false;
      // }, 3000);
    },
    // 关闭遮罩
    closeOverlay() {
      this.showMsgOverlay = false;
      // 将焦点回到原位置
      if (this.currentBlurName == "moveCartonNumber") {
        this.moveCartonNumberFocus();
      } else {
        this.locationCodeFocus();
      }
    }
  }
};
</script>

<style lang="less">
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.msgTxt {
  margin: 8px 83px 0;
  font-size: 18px;
  color: white;
}
</style>
